<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>Real-time Comments</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            color: #333;
        }

        /* 样式：用于展示core_data的容器 */
        #core-data-container {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f1f1f1;
            max-height: 200px;
            overflow-y: auto;
        }

        /* 样式：用于展示评论的容器 */
        #comments-container {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            max-height: 400px;
            overflow-y: auto;
            background-color: #f9f9f9;
        }

        .comment {
            padding: 10px;
            margin-bottom: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            flex-wrap: wrap;
        }

        .nick_name {
            font-weight: bold;
            color: #007BFF;
            margin-right: 10px;
        }

        #new-message-count {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            border-radius: 50%;
            display: none;
        }

        /* GMV 样式：红色字体 */
        #gmv-container {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: red;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 显示 GMV 数据的容器 -->
    <div id="gmv-container" style="display:none;"></div>

    <!-- 核心数据展示容器 -->
    <div id="core-data-container">
        <div id="core-data-content" style="justify-content: space-between;">等待核心数据...</div>
    </div>

    <!-- 评论展示容器 -->
    <div id="comments-container"></div>

    <!-- 新消息计数 -->
    <div id="new-message-count">0</div>

    <script>
        document.addEventListener('touchstart', function (e) {
            if (e.touches.length > 1) {
                e.preventDefault();
            }
        }, { passive: false });

        document.addEventListener('gesturestart', function (e) {
            e.preventDefault();
        });

        const commentsContainer = document.getElementById('comments-container');
        const coreDataContainer = document.getElementById('core-data-container');
        const coreDataContent = document.getElementById('core-data-content');
        const newMessageCount = document.getElementById('new-message-count');
        const gmvContainer = document.getElementById('gmv-container');
        let allComments = [];
        let isAtBottom = true; // 判断是否在底部

        // 获取本地局域网 IP 地址并建立 WebSocket 连接
        fetch('/local-ip')
            .then(response => response.json())
            .then(data => {
                const localIp = data.ip;
                const socketUrl = `ws://${localIp}:3000`; // 使用局域网 IP 地址
                const socket = new WebSocket(socketUrl);

                // 页面加载时请求所有评论
                fetch('/comments')
                    .then(response => response.json())
                    .then(comments => {
                        allComments = comments;
                        renderComments(comments); // 渲染所有评论
                    })
                    .catch(error => {
                        console.error('获取评论失败:', error);
                    });

                // 渲染评论的函数
                function renderComments(comments) {
                    comments.forEach(comment => {
                        const commentDiv = document.createElement('div');
                        commentDiv.className = 'comment';
                        commentDiv.innerHTML = `
            <div class="nick_name">${comment.nick_name}</div>
            <div class="content">${comment.content}</div>
        `;

                        // 添加点击事件监听器
                        const contentDiv = commentDiv.querySelector('.content');
                        let startTouch = null;

                        // 监听触摸开始事件，记录起始位置
                        contentDiv.addEventListener('touchstart', function (e) {
                            startTouch = e.touches[0];
                        });

                        // 监听触摸结束事件
                        contentDiv.addEventListener('touchend', function (e) {
                            if (startTouch) {
                                const endTouch = e.changedTouches[0];
                                const deltaX = Math.abs(endTouch.pageX - startTouch.pageX);
                                const deltaY = Math.abs(endTouch.pageY - startTouch.pageY);

                                // 判断如果滑动距离很小，则认为是点击事件
                                if (deltaX < 10 && deltaY < 10) {
                                    // 将点击的内容设置为红色
                                    // 清除所有其他评论的颜色
                                    const allContentDivs = commentsContainer.querySelectorAll('.content');
                                    allContentDivs.forEach(div => {
                                        div.style.color = ''; // 恢复默认颜色
                                    });

                                    this.style.color = 'red';
                                }
                            }
                        });

                        commentsContainer.appendChild(commentDiv);
                    });

                    updateNewMessageCount();
                    if (isAtBottom) {
                        scrollToBottom();
                    }
                }

                // 当接收到实时消息时处理
                socket.onmessage = function (event) {
                    try {
                        data = JSON.parse(event.data);  // 解析接收到的数据
                        if (data.comment) {
                            const newComment = data.comment;  // 解析接收到的数据
                            allComments.push(newComment); // 将新评论加入
                            renderComments([newComment]); // 渲染新评论
                        } else if (data.core_data) {
                            // 显示 core_data 数据，只显示 Index Display 和 Value
                            const coreData = data.core_data;
                            let coreDataHTML = ""; // 用来存放动态生成的HTML内容
                            coreData.forEach(item => {
                                // const value = parseFloat(item.value).toFixed(2); // 保留两位小数
                                if (item.indexDisplay == "千次观看成交金额")
                                    item.value = parseFloat(item.value / 100).toFixed(2);
                                if (item.indexDisplay.includes('率') || item.indexDisplay.includes('占比'))
                                    item.value = (item.value * 100).toFixed(2) + "%";
                                coreDataHTML += `
                                    <div style="margin-bottom: 10px;display: grid; grid-template-columns: auto auto;">
                                        <div>${item.indexDisplay}</div>
                                        <div style="text-align: center;color: ${item.indexDisplay === '实时在线人数' ? 'red' : 'black'};">${item.value}</div>
                                    </div>
                                `;
                            });
                            coreDataContent.innerHTML = coreDataHTML;
                        } else if (data.gmv) {
                            // 显示 gmv 数据，并且为红色
                            const gmvData = Math.floor(data.gmv / 100).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                            gmvContainer.innerHTML = `GMV: ${gmvData}`;
                            gmvContainer.style.display = 'block'; // 显示 GMV 容器
                        }
                    } catch (error) {
                        console.error('解析数据失败:', error);
                    }
                };

                // WebSocket 状态处理
                socket.onopen = function () {
                    console.log('WebSocket 连接已建立');
                };
                socket.onclose = function () {
                    console.log('WebSocket 连接已关闭');
                    alert('消息通道已关闭，请刷新页面');
                    location.reload();  // 刷新页面
                };
                socket.onerror = function (error) {
                    console.error('WebSocket 错误:', error);
                    alert('消息通道异常，请刷新页面');
                    location.reload();  // 刷新页面
                };

                // 监听滚动事件
                commentsContainer.addEventListener('scroll', () => {
                    const scrollTop = commentsContainer.scrollTop;
                    const scrollHeight = commentsContainer.scrollHeight;
                    const clientHeight = commentsContainer.clientHeight;

                    // 输出调试信息
                    console.log('scrollTop:', scrollTop);
                    console.log('clientHeight:', clientHeight);
                    console.log('scrollHeight:', scrollHeight);

                    // 判断是否滚动到最底部
                    if (scrollTop + clientHeight >= scrollHeight - 10) {
                        isAtBottom = true;
                        newMessageCount.style.display = 'none'; // 隐藏新消息数
                    } else {
                        isAtBottom = false;
                        updateNewMessageCount(); // 更新新消息数
                    }
                });
            })
            .catch(error => {
                console.error('获取局域网 IP 地址失败:', error);
            });

        // 滚动到最底部
        function scrollToBottom() {
            commentsContainer.scrollTop = commentsContainer.scrollHeight;
        }

        // 更新新消息计数
        function updateNewMessageCount() {
            const scrollTop = commentsContainer.scrollTop; // 当前滚动位置
            const scrollHeight = commentsContainer.scrollHeight; // 容器内容总高度
            const clientHeight = commentsContainer.clientHeight; // 容器可视区域的高度

            // 获取所有评论元素
            const comments = commentsContainer.querySelectorAll('.comment');

            let lastVisibleIndex = -1; // 最后一个可见评论的索引
            let hiddenCommentsCount = 0; // 隐藏评论的数量

            // 遍历所有评论，找到最后一个可见的评论
            comments.forEach((comment, index) => {
                const rect = comment.getBoundingClientRect(); // 获取评论的可视区域位置

                // 判断评论是否在当前视口内
                if (rect.top - commentsContainer.getBoundingClientRect().bottom <= 0 && rect.top >= commentsContainer.getBoundingClientRect().top) {
                    lastVisibleIndex = index; // 更新最后一个可见评论的索引
                }
            });

            // 如果最后一个可见评论的索引是有效的，计算后面的隐藏评论数量
            if (lastVisibleIndex !== -1) {
                hiddenCommentsCount = allComments.length - lastVisibleIndex - 2; // 隐藏的评论是从最后一个可见评论开始后的所有评论
            }

            console.log('最后一个可见评论的索引:', lastVisibleIndex);
            console.log('总评论数量:', allComments.length);
            console.log('隐藏的评论数量:', hiddenCommentsCount);

            // 如果有隐藏的评论，则显示它们的数量
            if (hiddenCommentsCount > 0) {
                newMessageCount.textContent = hiddenCommentsCount;
                newMessageCount.style.display = 'block'; // 显示隐藏的评论数
            } else {
                newMessageCount.style.display = 'none'; // 没有隐藏评论时隐藏消息数
            }
        }

        // 监听滚动事件
        commentsContainer.addEventListener('scroll', () => {
            updateNewMessageCount(); // 每次滚动时更新新消息数
        });
        // 监听滚动事件
        newMessageCount.addEventListener('click', () => {
            scrollToBottom(); // 每次滚动时更新新消息数
        });
    </script>
</body>

</html>